import Card from "antd/es/card/Card";
import BusinessMap from "../../../../../common/BusinessMap";
import { Button, Checkbox, Form, Input, Select, Space, Table, Upload } from 'antd';
import React, { useEffect, useRef, useState } from 'react';
import ScrollTable from "../../../../../common/ScrollTable";
import _ from 'lodash';
import { useParams } from 'react-router-dom'
import { useHistory } from "react-router-dom/cjs/react-router-dom.min";
import './index.less'
import CztHandle from "../../../../../../utils/apis/CztHandle";
import TextArea from "antd/es/input/TextArea";
import axios from "axios";
import FetchHelper from "../../../../../../utils/helper/fetch-helper";
import '../CztAdd/index.less'

export default function CztAdd() {
    const rootRef = useRef();
    const [allColumns, setAllColumns] = useState();
    const [componentDisabled, setComponentDisabled] = useState(true);
    const [params, setParams] = useState({
        pageSize: 10,
        pageNum: 1
    })
    // const cztkeyPath=useParams()?.keyPath.split('--')
    const cztkeyPath=useParams()?.keyPath
    // const cztdl=cztkeyPath[0]
    // const cztzl=cztkeyPath[1]
    const cztxl=cztkeyPath
   
    
    
    const [form] = Form.useForm();
    //获取按键、或者menu中的选项值
    const id = useParams()?.id;
    //获取当前时间
    const currentDate = new Date().toISOString().split('T')[0];
    //动态生成Form表单
    const [cztAddDynamicForms, setCztAddDynamicForms] = useState();
    useEffect(() => {
        CztHandle.cztAddDynamicApi().then(datas => {
            setCztAddDynamicForms(datas);
            form.setFieldsValue({
            //    cztdl:cztdl,
            //    cztzl:cztzl,
               cztxl:cztxl
            })
            
        })
    },[cztxl,form])
    //表格

    const data = [];
    //保存
    const onFinish=(values)=>{
       FetchHelper.postJson(`/admin-api/ybyj/cztjcb`,values).then(alert('新增成功！'))  
    }
    //取消按键的路由设置
    const history = useHistory()
    const quxiaoHandle = () => {
        history.push(`/manager/czt`)
    }

   
   
    return <div className='layout-h h100' style={{
        overflow: "scroll"
    }}>
        {/* <Card className='h100 fill' style={{
            position: "relative",
        }} >
            <BusinessMap />

        </Card> */}

        <Card className='h100 fill'>
            <Form method="post" 
            onFinish={onFinish}
            form={form}>
                <header style={{
                    fontSize: 20,
                    fontWeight: "bold"
                }}>设施</header>
                <hr />
                <div className="InputForm" style={{
                    flex:"flex",
                    flexWrap:"wrap"
                }}>
                    {cztAddDynamicForms !== undefined && cztAddDynamicForms.map(formItem => {
                        let node;
                        switch (formItem.type) {
                            case 'Textarea':
                                node = <TextArea></TextArea>;
                                break;
                            case 'input':
                            default:
                                node = <Input style={{
                                    width: "90%"
                                }} 
                                // defaultValue={formItem.alias==="承灾体大类"?formItem.alias:undefined}
                                
                                />
                        }
                        // const initialValue=cztAddDynamicForms[formItem.alias]==="承灾体大类"?cztAddDynamicForms[formItem.alias]:undefined;
                        return <div style={{
                            flexBasis:"33%",
                            marginBottom:"10px"
                        }}> 
                        <Form.Item
                            label={formItem.alias}
                            name={formItem.name}
                            rules={[{
                                required: true
                            }]}
                            
                            // initialValue={formItem.alias==="承灾体小类"?cztkeyPath:undefined}
                        >
                            {node}
                        </Form.Item>
                        </div>
                    })}
                </div>
                <Table columns={[
                    {
                        title: '代码',
                        dataIndex: 'dm',
                        key: 'dm',

                    },
                    {
                        title: '指标名称',
                        dataIndex: 'zbmc',
                        key: 'zbmc',
                    },
                    {
                        title: '数量',
                        dataIndex: 'sl',
                        key: 'sl',
                    },
                    {
                        title: '计量单位',
                        dataIndex: 'jldw',
                        key: 'jldw',
                    }
                ]} dataSource={data} />

                <div className="layout-h">
                <Button  className="btn1"
                type="primary"
                htmlType="submit" 
                
                // onClick={e => {
                //     form.validateFields().then(values => {
                //         // axios.post("/ybyj/cztjcb",values.target.value)
                        
                        
                //     }).catch(err => {
                //         console.log("上传失败")
                //     })
                // }}
                
                >新增</Button>

                <Button onClick={quxiaoHandle} className="btn2">取消</Button>
                </div>

            </Form>
        </Card>


    </div>
}